<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>v-for</title>
		<script src="../assets/js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="item in sortitems">{{item}}</li>
			</ul>
			<ul>
				<li v-for="su in students">{{su.name+"--"+su.age}}</li>
				<hr />
				<li v-for="(student,index) in sortStudents">{{index}}:{{student.name}} - {{student.age}}</li>
			</ul>
		</div>
		<script>
			var app = new Vue({
				el:'#app',
				data:{
					items:[25,56,0,36,45,90,89,74],
					students:[
						{name:"freddy",age:27},
						{name:"king",age:25},
						{name:"Panan",age:36},
						{name:"meivnc",age:34}
					]
				},
				computed:{
					sortitems:function(){
						return this.items.sort(sortNum);
					},
					sortStudents:function(){
						return sortByKey(this.students,'age');
					}
				}
			})
			
			function sortNum(a,b){
				return a-b
			}
			
			//数组对象方法排序:
			function sortByKey(array,key){
			    return array.sort(function(a,b){
			      var x=a[key];
			      var y=b[key];
			      return ((x>y)?-1:((x<y)?1:0));
			   });
			}
		</script>
	</body>
</html>
